//0.这不巧了吗
let arr=[
    {x:-64,s:.83,z:1},
    {x:140,s:1,z:2},
    {x:338,s:.83,z:1},
    {x:960,s:.83,z:1},
    {x:960,s:.83,z:1},
    {x:960,s:.83,z:1},
]

function render(){
    //1.获取所有轮播图
    let swiperObjs=document.querySelectorAll('.swiper .swiper-slide')
    //2.遍历加行内样式
    swiperObjs.forEach((item,i)=>{//item机试每个wswiper-slide标签对象
    // item.style.transform='translateX(-64px) scale(0.83)'
    item.style.transform=`translateX(${arr[i].x}px) scale(${arr[i].s})`
    item.style.zIndex=arr[i].z
    })
}

render()

function next(){
        //1.从数组最后弹出一个值
        var temp=arr.pop()
        //2.将弹出的只压入到数组中 数组第一个值
        arr.unshift(temp)
        //3.从新渲染遍历
        render()
}

document.querySelector('.swiper .swiper-next').onclick = next

function prev(){
    //1.从数组前面弹出一个框
    var temp=arr.shift()
    //2.将弹出的值push到数组后面
    arr.push(temp)
    //3.重新渲染
    render()
}

document.querySelector('.swiper .swiper-prev').onclick = prev


//点击图片切换
document.querySelector('.swiper .swiper-wrapper').onclick = function(evt){
    //获取事件对象
    let e=evt||window.event
    let target=e.target||e.srcElement

    if(target.parentNode.style.transform.includes('64px')){
        prev()
    }
    if(target.parentNode.style.transform.includes('338px')){
        next()
    }
}

